<template>
  <a-modal
    v-model:open="visible"
    title="基线导入"
    @ok="handleOk"
    @cancel="handleCancel"
    destroyOnClose
    centered
    :confirmLoading="loading"
  >
    <a-form :model="formState" ref="formRef">
      <a-form-item
        name="fileList"
        :rules="{
          required: true,
          message: '请上传文件',
          trigger: 'change',
        }"
      >
        <template v-slot:label>
          <span class="my-custom-label">上传文件</span>
          <span type="link" class="modelLink" @click="downLoadTep"
            >（下载模版）</span
          >
        </template>
        <a-upload
          v-model:file-list="formState.fileList"
          :before-upload="beforeUpload"
          :maxCount="1"
          accept=".xlsx,.xls,.csv"
          @change="handleUploadChange"
        >
          <a-button
            class="greenpPlainBtn"
            :loading="importLoading"
            size="small"
          >
            <upload-outlined />
            选择文件
          </a-button>

          <template #itemRender="{ file }">
            <div class="ant-upload-list-item-info">
              <span class="ant-upload-list-item-name">{{ file.name }}</span>
            </div>
          </template>
        </a-upload>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>

import { UploadOutlined } from "@ant-design/icons-vue";

const $api = inject("$api");
const formRef = ref(null);
const emit = defineEmits(["update:importBaseVisible"]);
const props = defineProps({
  importBaseVisible: {
    type: Boolean,
    default: false,
  },
});
const visible = ref(props.importBaseVisible);
watch(
  () => props.importBaseVisible,
  (val) => {
    visible.value = val;
  }
);
const loading = ref(false);
const formState = ref({
  fileList: [],
});
const importLoading = ref(false);
const beforeUpload = (file) => {
  importLoading.value = true;
  const isValidFormat =
    file.type ===
      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
    file.type === "application/vnd.ms-excel" ||
    file.name.endsWith(".csv");
  if (!isValidFormat) {
    message.error("只支持上传 .xlsx, .xls, .csv 格式的文件！");
    return false;
  }
  return false;
};
const handleUploadChange = (data) => {
  const { file } = data;
  importLoading.value = false;
};
const handleOk = async () => {
  await formRef.value.validate();

  loading.value = true;
  try {
    const formData = new FormData();
    formData.append("file", formState.value.fileList[0].originFileObj);

    const res = await $api.importBaseCost(formData);
    if (res && res.code === 0) {
      message.success("导入成功");
    } else {
      message.error("导入失败");
    }

    handleCancel();
  } catch (error) {
    console.log("error", error);
    message.error("导入失败");
  } finally {
    loading.value = false;
  }
};

const handleCancel = () => {
  emit("update:importBaseVisible", false);
  formState.value.fileList = [];
};
//模版下载
const downLoadTep = () => {
  window.location.href =
    "https://ngp-cloud.oss-cn-shenzhen.aliyuncs.com/public/monitor/%E5%9F%BA%E7%BA%BF%E6%95%B0%E6%8D%AE%E5%AF%BC%E5%85%A5%E6%A8%A1%E7%89%88.xlsx";
};
</script>

<style lang="less" scoped>
.w-full {
  width: 100%;
}
.modelLink {
  color: #599dfe;
  cursor: pointer;
}
.ant-form {
  margin-top: 20px;
}
</style>
